<template>
  <div class="home">
    <Header head-title="预约挂号" go-back="true"></Header>
    <section class="group">
      <h3 class="fontsM">平顶山市第一人民医院 <span class="fonts">内分泌科</span> </h3>
      <div class="selectDate Select">
        <div class="fonts activecolor Datetitle">
          <p>就诊日期</p>
        </div>
        <div class="DateSele">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide class="swiperDate borderR" v-for="(item, index) in SwiperDateList" :key="index">
              <section @click="Selectweek(index,item.date,item.num)" :class="[label !== index ? item.num == '有号' : item.num == '无号' ? 'SwiperNone' : 'SwiperActive']">
                <div class="Selects">
                  <p class="fonts">{{item.week}}</p>
                  <p class="fonts">{{item.date}}</p>
                  <p class="fonts swipBtn" :class="item.num == '有号' ? 'activecolor' : ''">{{item.num}}</p>
                </div>
              </section>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </section>
    <!-- //  医生列表 -->
    <section class="group fontC ani" v-if="NumNo">
      <p class="fonts">当天已无号，请查看其他日期号源</p>
    </section>
    <section class="group" v-if="Numyes">
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
      <div class="Select JKall" @click="ToDoctor()">
        <div class="Doctor">
          <img src="../../assets/img/Touxiang.png" alt="">
        </div>
        <div class="Doctorcon">
          <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师</span> </h3>
          <p class="fontsMin">擅长：糖尿病，甲状腺疾病的诊治，对于糖尿病有自己独特的治疗方法。</p>
        </div>
        <el-button class="DoctorBtn" type="primary" size="small">预约</el-button>
      </div>
    </section>
  </div>
</template>

<script>
import Header from '../../components/Header'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  data () {
    return {
      NumNo: false,
      Numyes: false,
      label: -1,
      SwiperDateList: [
        { week: '周一', date: '3月21号', num: '无号' },
        { week: '周二', date: '3月22号', num: '无号' },
        { week: '周三', date: '3月23号', num: '有号' },
        { week: '周四', date: '3月24号', num: '有号' },
        { week: '周五', date: '3月25号', num: '无号' },
        { week: '周六', date: '3月26号', num: '有号' },
        { week: '周日', date: '3月27号', num: '有号' }
      ],
      //  swiper 触摸滑动
      swiperOptions: {
        slidesPerView: 2,
        spaceBetween: 10,
        breakpoints: {
          320: { // 当屏幕宽度大于等于320
            slidesPerView: 3,
            spaceBetween: 1
          },
          768: { // 当屏幕宽度大于等于768
            slidesPerView: 5,
            spaceBetween: 20
          },
          1280: { // 当屏幕宽度大于等于1280
            slidesPerView: 6,
            spaceBetween: 30
          }
        }
      }
    }
  },
  components: {
    Header,
    Swiper,
    SwiperSlide
  },
  methods: {
    //  点击选择日期
    Selectweek (index, date, num) {
      console.log(date)
      this.label = index
      if (num === '有号') {
        this.NumNo = false
        this.Numyes = true
      } else if (num === '无号') {
        this.NumNo = true
        this.Numyes = false
      }
    },
    //  点击选择医生预约
    ToDoctor () {
      this.$router.push({
        path: '/SelectDoctor'
      })
    }
  }
}
</script>

<style scoped>
.home {
  background: none;
}
.group1 {
    padding-top: 0;
    margin-top: 0;
}
</style>
